<template>
  <div class="products-page">
    <Header />
    
    <!-- 页面标题和面包屑 -->
    <div class="page-header">
      <div class="container">
        <h1>商品列表</h1>
        <p>发现心仪的华为产品</p>
      </div>
    </div>

    <!-- 左右分栏布局 -->
    <div class="products-layout">
      <div class="container">
        <div class="layout-content">
          <!-- 左侧筛选区 (25%宽度) -->
          <aside class="filter-sidebar">
            <ProductFilter />
          </aside>
          
          <!-- 右侧商品区 (75%宽度) -->
          <main class="products-main">
            <!-- 排序和筛选栏 -->
            <div class="products-toolbar">
              <div class="toolbar-left">
                <span class="product-count">共 {{ products.length }} 件商品</span>
              </div>
              <div class="toolbar-right">
                <el-select v-model="sortBy" placeholder="排序方式" size="small">
                  <el-option label="默认排序" value="default"></el-option>
                  <el-option label="价格从低到高" value="price_asc"></el-option>
                  <el-option label="价格从高到低" value="price_desc"></el-option>
                  <el-option label="最新上架" value="newest"></el-option>
                </el-select>
              </div>
            </div>

            <!-- 商品网格 -->
            <div class="products-grid">
              <ProductCard 
                v-for="product in filteredProducts" 
                :key="product.id"
                :product="product"
                @add-to-cart="handleAddToCart"
                @view-detail="handleViewDetail"
              />
            </div>

            <!-- 分页 -->
            <div class="pagination-container">
              <el-pagination
                v-model:current-page="currentPage"
                v-model:page-size="pageSize"
                :page-sizes="[12, 24, 36, 48]"
                :small="true"
                :background="true"
                layout="total, sizes, prev, pager, next, jumper"
                :total="products.length"
              />
            </div>
          </main>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import Header from '@/components/Header.vue'
import ProductFilter from '@/components/ProductFilter.vue'
import ProductCard from '@/components/ProductCard.vue'

const router = useRouter()

// 响应式数据
const sortBy = ref('default')
const currentPage = ref(1)
const pageSize = ref(12)

// 模拟商品数据
const products = ref([
  {
    id: 1,
    name: 'HUAWEI Pura70 Pro+',
    price: 8979,
    originalPrice: 9999,
    image: '/src/assets/images/product-image.png',
    discount: 10,
    colors: ['星耀黑', '冰霜银', '翡冷翠'],
    storage: ['256GB', '512GB', '1TB'],
    tags: ['旗舰', '新品']
  },
  {
    id: 2,
    name: 'HUAWEI Pura70 Pro',
    price: 6999,
    originalPrice: 7999,
    image: '/src/assets/images/product-image.png',
    discount: 12,
    colors: ['曜石黑', '珍珠白', '青山黛'],
    storage: ['256GB', '512GB'],
    tags: ['热卖']
  },
  {
    id: 3,
    name: 'HUAWEI Pura70',
    price: 5499,
    originalPrice: 5999,
    image: '/src/assets/images/product-image.png',
    discount: 8,
    colors: ['亮黑色', '雪域白', '樱语粉'],
    storage: ['128GB', '256GB', '512GB'],
    tags: ['性价比']
  },
  {
    id: 4,
    name: 'HUAWEI Pura70 Ultra',
    price: 9999,
    originalPrice: 10999,
    image: '/src/assets/images/product-image.png',
    discount: 9,
    colors: ['至尊黑', '至尊金'],
    storage: ['512GB', '1TB'],
    tags: ['旗舰', '至尊']
  }
])

// 计算属性：排序后的商品
const filteredProducts = computed(() => {
  let sorted = [...products.value]
  
  switch (sortBy.value) {
    case 'price_asc':
      sorted.sort((a, b) => a.price - b.price)
      break
    case 'price_desc':
      sorted.sort((a, b) => b.price - a.price)
      break
    case 'newest':
      sorted.sort((a, b) => b.id - a.id)
      break
    default:
      break
  }
  
  return sorted
})

// 事件处理
const handleAddToCart = (product) => {
  console.log('添加到购物车:', product)
  // 这里可以调用购物车相关的 store 或 API
  ElMessage.success(`已添加 ${product.name} 到购物车`)
}

const handleViewDetail = (product) => {
  console.log('查看详情:', product)
  router.push(`/product/${product.id}`)
}

onMounted(() => {
  console.log('Products page mounted')
})
</script>

<style scoped>
.products-page {
  min-height: 100vh;
  background: #f8f9fa;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* 页面标题 */
.page-header {
  background: white;
  padding: 40px 0;
  border-bottom: 1px solid #e9ecef;
}

.page-header h1 {
  font-size: 2.5rem;
  color: #333;
  margin-bottom: 10px;
  font-weight: bold;
}

.page-header p {
  color: #666;
  font-size: 1.1rem;
}

/* 左右分栏布局 */
.products-layout {
  padding: 30px 0;
}

.layout-content {
  display: flex;
  gap: 30px;
  align-items: flex-start;
}

/* 左侧筛选区 */
.filter-sidebar {
  flex: 0 0 280px; /* 固定宽度 */
  position: sticky;
  top: 100px;
}

/* 右侧商品区 */
.products-main {
  flex: 1;
  min-width: 0; /* 防止flex item溢出 */
}

/* 工具栏 */
.products-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: white;
  padding: 20px;
  border-radius: 10px;
  margin-bottom: 20px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.product-count {
  color: #666;
  font-size: 14px;
}

/* 商品网格 */
.products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
}

/* 分页 */
.pagination-container {
  display: flex;
  justify-content: center;
  background: white;
  padding: 30px;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

/* 响应式设计 */
@media (max-width: 1024px) {
  .layout-content {
    flex-direction: column;
  }
  
  .filter-sidebar {
    position: static;
    width: 100%;
    margin-bottom: 20px;
  }
  
  .products-grid {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  }
}

@media (max-width: 768px) {
  .page-header h1 {
    font-size: 2rem;
  }
  
  .products-toolbar {
    flex-direction: column;
    gap: 15px;
    align-items: stretch;
  }
  
  .products-grid {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 15px;
  }
}

@media (max-width: 480px) {
  .container {
    padding: 0 15px;
  }
  
  .products-grid {
    grid-template-columns: 1fr;
  }
}
</style>